import React, { Component, Fragment } from 'react';
import './style.css'
import './TodoItem'
import TodoItem from './TodoItem';

//JSX模板语法
class TodoList extends Component {
    //类的构造函数，最优先执行的函数
    constructor(props) {
        super(props);//调用父类构造函数
        this.state = {//组件状态
            inputValue: '',
            list: []
        }
    }
    //页面挂载之前执行
    componentWillMount() {
        console.log('componentWillMount')
    }
    //页面挂载之后执行（ajax）
    componentDidMount() {
        console.log('componentDidMount')
    }
    //组件被更新之前会被执行(返回true or false 可以控制操作是否更新)
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
    }
    //组件更新之前，shouldComponentUpdate更新（return true）之后被执行
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }
    //组件更新之后被执行
    componentDidUpdate() {
        console.log('componentWillUpdate')
    }
    //父组件传来的props参数发生改变时且被重新render之后被执行
    componentWillReceiveProps() {

    }
    // 组件被移除之前执行
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }


    render() {
        // console.log('render')
        /* 使用变量加{} */
        return (
            <Fragment>
                <div>
                    {/* 下面是JSX的注释 */}
                    <label htmlFor="insertArea">输入内容：</label>
                    <input
                        id="insertArea"
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.handleInputChange.bind(this)} />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul ref={(ul) => { this.ul = ul }}>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        )
    }
    getTodoItem() {
        return this.state.list.map((item, index) => {
            return (
                <div key={index}>
                    <TodoItem
                        content={item}
                        index={index}
                        itemDelete={this.handleItemDelete.bind(this)}
                    />
                    {/*  <li key={index} 
                                onClick={this.handleItemDelete.bind(this,index)}
                                dangerouslySetInnerHTML = {{__html:item}}
                            ></li> */}
                </div>

            )
        })
    }
    handleInputChange(e) {
        // 改变state里面的数据
        // this.setState({
        //     inputValue: e.target.value
        // })
        //新版推荐返回函数
        const value = e.target.value;
        this.setState(() => ({ inputValue: value }));
    }

    handleBtnClick() {
        // this.setState({
        //     list: [...this.state.list, this.state.inputValue],
        //     inputValue: ''
        // })
        //新版react推荐返回函数 ,setState是异步函数，第二个参数可以执行回调函数
        // this.setState((prevState) => ({
        //     list: [...prevState.list, prevState.inputValue],
        //     inputValue: ''
        // }));
        //ref帮助直接获取dom元素
        this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        })
            // ,()=>{ 
            //     console.log(this.ul.querySelectorAll('div').length)
            // }
        );
    }
    handleItemDelete(index) {
        // immutable语法 : state不允许任何改变
        // let list = [...this.state.list]
        // list.splice(index, 1)
        // this.setState({
        //     list
        // })

        //新版react推荐返回函数
        this.setState((prevState) => {
            const list = [...prevState.list];
            list.splice(index, 1);
            return {
                list
            }
        })
    }
}

export default TodoList;
